<template>
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="nav">
                <div class="title">产品类型列表</div>
                <div class="tree">
                    <treeProduct @sendTreeData="sendTreeData"></treeProduct>
                </div>
            </div>
        </el-col>
        <el-col :span="20">
            <div class="wrapper">
                <div class="myTitle" v-if="this.$route.params.type=='add'">菜品添加</div>
                <div class="myTitle" v-if="this.$route.params.type=='look'">菜品详情</div>
                <div class="myTitle" v-if="this.$route.params.type=='update'">菜品修改</div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="所属分类" prop="category">
                        <span>{{ ruleForm.category }}</span>
                    </el-form-item>
                    <el-form-item label="菜品名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="price">
                        <el-input v-model="ruleForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="上传图片" prop="image">
                        <UploadImg @sendImg="sendImg"></UploadImg>
                    </el-form-item>
                    <el-form-item label="商品描述" prop="descs">
                        <WangEditor :content="this.ruleForm.descs" ref="wangEditor"></WangEditor>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="closePage" v-if="this.$route.params.type=='look'">返回</el-button>
                        <div v-else>
                            <el-button type="primary" @click="submitForm('ruleForm')" :plain="true">保存</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                            <el-button @click="closePage">取消</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import treeProduct from './treeProduct.vue'
import UploadImg from './upLoadImg.vue'
import WangEditor from './wangEditor.vue'
import axios from 'axios' 
// import dayjs from 'dayjs'
export default {
    components:{
        treeProduct,UploadImg,WangEditor
    },
    data() {
        return {
            seeInfo:'',
            updateInfo:'',
            ruleForm: {
                category:'',
                descs:''
            },
            categoryId:'',
            rules: {
                name: [
                    { required: true, message: '请输入菜品名称', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                num: [
                    { required: true, message: '请输入商品数量', trigger: 'change' }
                ],
                price: [
                    { required: true, message: '请输入菜品价格', trigger: 'change' }
                ],
                category: [
                    { required: true, message: '请选择菜品的分类', trigger: 'change' }
                ]
            }
        };
    },
    created(){
        this.$bus.on('sendHtml',(val)=>{
            let str=val.split("<p>")
            str=str[1]
            str=str.split("</p>")
            str=str[0]
            this.ruleForm.descs=str
        })
        if(this.$route.params.type=='update'||this.$route.params.type=='look'){
            axios({
                url:`http://localhost:8080/kfc/admin/dish/get?id=${this.$route.params.id}`,
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                }
            }).then(res=>{
                this.ruleForm=Object.assign(res.data.data,this.ruleForm)
                this.ruleForm.isShow=true
                this.ruleForm.category=this.ruleForm.categoryName
                this.$nextTick(() => {
                    this.$refs.wangEditor.html = this.ruleForm.description;
                })
                this.$bus.emit('sendUrl',this.ruleForm.image)
                this.categoryId=this.ruleForm.categoryId
            })
        }
    },
    methods:{
        closePage(){
            this.$router.push('/product/list')
        },
        sendTreeData(val) {
            //存储接受的tree的数据 val={id:,cid:,name:''}
            // console.log(val.label);
            this.ruleForm.category = val.label
            this.categoryId=val.value
        },
        sendImg(val){
            this.ruleForm.image=val
        },
        submitForm(forName){
            this.$refs[forName].validate((valid)=>{
                if(valid){
                    // console.log(this.showCategoryId());
                    if(this.$route.params.type=='update'){
                        axios({
                            url:'http://localhost:8080/kfc/admin/dish',
                            method:'put',
                            headers:{
                                token:localStorage.getItem('jwt')
                            },
                            data:{
                                categoryId:this.categoryId,
                                id:this.ruleForm.id,
                                name:this.ruleForm.name,
                                price:this.ruleForm.price,
                                description:this.ruleForm.descs,
                                image:this.ruleForm.image
                            }
                        })
                        this.$message({
                            type:'success',
                            message:'修改成功'
                        })
                    }
                    else{
                        axios({
                            url:'http://localhost:8080/kfc/admin/dish/add',
                            method:'post',
                            headers:{
                                token:localStorage.getItem('jwt')
                            },
                            data:{
                                categoryId:this.categoryId,
                                name:this.ruleForm.name,
                                price:this.ruleForm.price,
                                description:this.ruleForm.descs,
                                image:this.ruleForm.image
                            }
                        })
                        this.$message({
                            type:'success',
                            message:'添加成功'
                        })
                    }
                    setTimeout(()=>{
                        this.$router.push({
                            name:'list'
                        })
                    },1000)
                }
                else{
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        resetForm(forName){
            this.$refs[forName].resetFields()
        },
    }
}
</script>

<style lang="less" scoped>
.nav{
    height: 600px;
    background: #FFF;
    .title {
        background: skyblue;
        padding: 20px;
        color: #fff;
    }
    .tree{
        padding: 20px;
    }
}
.wrapper{
    background: #FFF;
    .myTitle {
        background: #eee;
        padding: 14px;
        color: #333;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .demo-ruleForm{
        padding: 20px;
    }
}
</style>